//头部下拉导航
$('#nav').click(function(){
    $('#sidebar ul').slideToggle(100)
});
var V=0;
$('#sidebar ul li').hover(function(){
    V=$(this).index();
    $('#bottom ol').eq(V).addClass('subnav').siblings().removeClass('subnav')
},function(){
    $('#bottom ol').removeClass('subnav')
});
$('#bottom ol').hover(function(){
    $('#bottom ol').eq(V).addClass('subnav').siblings().removeClass('subnav');
},function(){
    $('#bottom ol').removeClass('subnav')
});


//下部滑动图
$('#btn li').click(function(){
   var K=$(this).index();
    var Width=$('#scroll').width();
    $(this).addClass('on').siblings().removeClass('on');
    $('#scroll-plan').animate({left:-K*Width},1000)
});

//for(var i=0;i<localStorage.length;i++){
//    var key=localStorage.key(i);
//    var Value=localStorage.getItem(key);
//    $('tbody').append(Value);
//}

/*
var checkOne=$('.valuation table tbody tr .checkOne label input');
var checkAll=$('.valuation .checkAll');
var Deleta=$('.valuation .delete-btn');
colTotal();
//单选
checkOne.click(function(){
    if(checkOne.length==checkOne.filter(':checked').length){
        checkAll.prop('checked',true)
    }else {
        checkAll.prop('checked',false)
    }
    colTotal();
});
//多选
checkAll.click(function(){
    if ($(this).prop('checked')){
        checkOne.prop('checked',true);
        checkAll.prop('checked',true)
    }else {
        checkOne.prop('checked',false);
        checkAll.prop('checked',false)
    }
    colTotal();
});
//添加 减少 按钮
$('.valuation table tbody tr .num .add').click(function(){
    var i=parseInt($(this).siblings('input').val() );
    $(this).siblings('input').val(++i);
    colTotal();
});
$('.valuation table tbody tr .num .reduce').click(function(){
    var i=parseInt($(this).siblings('input').val() );

    if(i<=1){
        $(this).siblings('input').val(1);
    }else {
        $(this).siblings('input').val(--i);
    }
    colTotal();
});
//输入多少
$('.valuation table tbody tr .num input').change(function(){
    var re=/^[0-9]*$/;
    if(!(re.test($(this).val()))||$(this).val()<1){
        $(this).val(1)
    }
    colTotal();
});
//删除
Deleta.click(function(){
    var x=$(this).parents('tr').index();
    var key=localStorage.key(x);
    var ask=confirm('您确定要删除么');
    if(ask){
        $(this).parents('tr').remove();
        localStorage.removeItem(key);
    }
    if($('.valuation table tbody tr .checkOne label input').length==$('.valuation table tbody tr .checkOne input').filter(':checked').length){
        checkAll.prop('checked',true)
    }else {
        checkAll.prop('checked',false)
    }
    colTotal();
});
$('.valuation .status button').click(function(){
    if($('.valuation .status .right .selected i').text()<1){
        alert('请选择要购买的商品')
    }
});
function colTotal(){
    var checkOne=$('.valuation table tbody tr .checkOne label input');
    var price=$('.valuation table tbody tr .price span');
    var num=$('.valuation table tbody tr .num input');
    var allPrice=$('.valuation table tbody tr .allPrice span');
    var sum=0;
    var count=0;
    checkOne.each(function(i){
        allPrice[i].innerHTML=(price[i].innerHTML*num[i].value).toFixed(2);
        if(this.checked){
            sum+=parseFloat(allPrice[i].innerHTML);
            count+=parseFloat(num[i].value);
        }
    });
    $('.valuation .status .right .total span').html(sum);
    $('.valuation .status .right .selected i').html(count);
}
*/

$(function () {

    getShopCartData();
    checkEvent();
    isCheckAll();
    checkAllEvent();
    addEvent();
    minusEvent();
    numEvent();
    delEvent();
    delsEvent();


    checkAll.click(function(){
        if ($(this).prop('checked'))
        {checkOne.prop('checked',false);checkAll.prop('checked',false)}
    });

    function delEvent() {
        $('#shopList').on('click', '.delete-btn', function () {
            var isDel = confirm('你确定要删除？');
            if (isDel) {
                $(this).parents('tr').remove();
                totalPrice();
                setTotals()
            }
        })
    }
    function delsEvent() {
        $('.status').on('click', '.amputate', function () {
            var isDel = confirm('你确定要删除？');
            if (isDel) {
                $('tr').remove();
                totalPrice();
                setTotals()
            }
        })
    }

    function numEvent() {
        $('#shopList').on('keyup', '.nums', function () {
            var _vm = $(this);
            var num = _vm.val();
            num = num.replace(/[^\d]+/g, '').replace(/^0+/, '');
            _vm.val(num);
            if (num) {
                totalPrice();
                isCheckAll();
                setTotals()
            }
        }).on('blur', '.num', function () {
            var _vm = $(this);
            var num = _vm.val();
            if (!num) {
                _vm.val(1);
            }
            totalPrice();
            isCheckAll();
            setTotals()
        })
    }

    function minusEvent() {
        $('#shopList').on('click', '.reduce', function () {
            var _vm = $(this);
            var numNode = _vm.next();
            var num = numNode.val() * 1;
            if (num > 1) {
                num--;
            }
            numNode.val(num);
            totalPrice();
            isCheckAll();
            setTotals()
        })
    }

    function addEvent() {
        $('#shopList').on('click', '.add', function () {
            var _vm = $(this);
            var numNode = _vm.prev();
            var num = numNode.val() * 1;
            num++;
            numNode.val(num);
            totalPrice();
            isCheckAll();
            setTotals()
        })
    }

    function checkAllEvent() {
        $('#checkAll').click(function () {
            $('#shopList .checkbox ,#checkAlls').prop('checked', $(this).prop('checked'));
            totalPrice();
        });
        $('#checkAlls').click(function () {
            $('#shopList .checkbox ,#checkAll').prop('checked', $(this).prop('checked'));
            totalPrice();
            setTotals()
        })
    }

    function isCheckAll() {
        $('.checkAll').prop('checked', $('#shopList .checkbox').length === $('#shopList .checkbox:checked').length);

    }

    function checkEvent() {
        $('#shopList').on('click', '.checkbox', function () {
            totalPrice();
            isCheckAll();
            setTotals()
        })
    }

    function totalPrice() {
        var lists = $('#shopList tr');
        var total = 0;
        var leng=$(".checkbox:checked").length;
        lists.each(function () {
            var _vm = $(this);
            var isChecked = _vm.find('.checkbox').prop('checked');
            if (isChecked) {
                var price = _vm.find('.price span').text() * 1;
                var num = _vm.find('.nums').val() * 1;
                var numss =  price * num;
                total += numss;
                _vm.find('.allPrice span').text(numss);

            }
            $('#total').text(total);
            $('#selected').text(leng)
        })
    }

    function setTotals() {
            var lists = $('#shopList tr');
            lists.each(function () {
                var _vm = $(this);
                if (_vm) {
                    var price = _vm.find('.price span').text() * 1;
                    var num = _vm.find('.nums').val() * 1;
                    var numss =  price * num;
                    _vm.find('.allPrice span').text(numss);
                }
            })
        }

    function createHtmlByDatas(data) {
        var str = '';
        $.each(data, function (index, item) {
            str += '<tr>'
                +'<td class="checkOne">'
                +'<label><input type="checkbox" class="checkbox"><i></i></label>'
                +'</td>'
                +'<td class="pro">'
                +'<a href="#">'
                +'<img src="'+item.imgSrc+'" alt="'+item.imgSrc+'">'
                +'</a>'
                +'</td>'
                +'<td class="summary">'
                +'<a href="#">'+item.title+'</a>'
                +'</td>'
                +'<td class="type">'
                +'<div>颜色分类：<span>'+item.color+'</span></div>'
                +'<div>尺码：<span>'+item.size+'</span></div>'
                +'</td>'
                +'<td class="price">&yen; <span>'+item.price+'</span></td>'
                +'<td class="num">'
                +'<button class="reduce">-</button>'
                +'<input type="text" value="'+item.num+'" class="nums">'
                +'<button class="add">+</button>'
                +'</td>'
                +'<td class="allPrice">&yen; <span>'+item.allPrice+'</span></td>'
                +'<td class="delete">'
                +'<div>移入收藏夹</div>'
                +'<div class="delete-btn">删除</div>'
                +'</td>'
                +'</tr>'
        });
        $('#shopList').html(str);
    }

    function getShopCartData() {
        $.getJSON('./data/shopCar.json').then(function (data) {
            createHtmlByDatas(data);
            totalPrice();
            setTotals()

        })
    }
});
